<template>
  <v-chart :option="option" autoresize />
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  name: 'HaveBeenScored',

  components: {
    VChart
  },

  props: {
    data: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {}
  },

  computed: {
    option() {
      let times = []
      let data = []
      this.data.forEach((e) => {
        times.push(e.addTime)
        data.push(e.orgPostUserWorkSumScore_score)
      })
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        xAxis: [
          {
            name: '日期',
            type: 'category',
            axisTick: { show: false },
            data: times
          }
        ],
        yAxis: [
          {
            name: '分数',
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            data
          }
        ]
      }
    }
  }
}
</script>
